import React, { useState, useEffect, useCallback } from "react";
import { Collapse } from "antd";
import * as _lodash from "lodash";
import { useEditStore } from "@/context/editStore/index";
import Icon, { CodepenOutlined } from "@ant-design/icons";
import { v4 as uuidv4 } from "uuid";
const { Panel } = Collapse;
import navImg from "@/pages/Editor/access/nav.png";
// 编辑器封装的组件
import {WrapTitle, LabeInput, LayoutFlex, LabeSlideFlex, ColorPickFlex} from "./components";
import ConfigAttrs from "./control/configAttrs";

import "./index.less";

// interface Props {
//   history: History;
// }
const comHeText = require("./comJson/comHeText.json");
const comHeTitle = require("./comJson/comHeTitle.json");
const comHeImg = require("./comJson/comHeImg.json");
const comHeNoticebar = require("./comJson/comHeNotice.json");
const comHeSearch = require("./comJson/comHeSearch.json");
const comHeDivider = require("./comJson/comHeDivider.json");
const comHeBanner = require("./comJson/comHeBanner.json");
const comHeTabNav = require("./comJson/comHeTabNav.json");

const elementList = [
    {
        title: "基础元素",
        list: [
            {
                text: "图片",
                icon: "",
                component: "HeImg",
                data: comHeImg,
            },
            {
                text: "标题",
                icon: "",
                component: "HeTitle",
                data: comHeTitle,
            },
            {
                text: "正文",
                icon: "",
                component: "HeText",
                data: comHeText,
            },
            {
                text: "公告",
                icon: "",
                component: "HeNoticebar",
                data: comHeNoticebar,
            },
            {
                text: "搜索",
                icon: "",
                component: "HeSearch",
                data: comHeSearch,
            },
            {
                text: "分隔线",
                icon: "",
                component: "HeDivider",
                data: comHeDivider,
            },
            {
                text: "轮播图",
                icon: "",
                component: "HeBanner",
                data: comHeBanner,
            },
            {
                text: "图文导航",
                icon: "",
                component: "HeTabNav",
                data: comHeTabNav,
            },
            
        ]
    },
    {
        title: "布局容器类",
        list: [
            {
                text: "自然布局",
                icon: ""
            },
            {
                text: "行列容器",
                icon: ""
            },
            {
                text: "页头",
                icon: ""
            },
            {
                text: "卡片",
                icon: ""
            },
            {
                text: "内部卡片",
                icon: ""
            },
            {
                text: "高级对话框",
                icon: ""
            },
            {
                text: "高级抽屉",
                icon: ""
            },
            {
                text: "选项卡",
                icon: ""
            },
            
        ]
    },
    {
        title: "表格类",
        list: [
            {
                text: "可编辑表格",
                icon: ""
            },
            {
                text: "母子表格",
                icon: ""
            },
            {
                text: "查询刷选",
                icon: ""
            },
            {
                text: "分组表格",
                icon: ""
            },
            {
                text: "高级表格",
                icon: ""
            },
            {
                text: "树状表格",
                icon: ""
            },
        ]
    },
    {
        title: "表单类",
        list: [
            {
                text: "电梯表单",
                icon: ""
            },
            {
                text: "高级表单",
                icon: ""
            },
            {
                text: "步骤表单",
                icon: ""
            }
        ]
    },
    {
        title: "图表",
        list: [
            {
                text: "面积图",
                icon: ""
            },
            {
                text: "条形图",
                icon: ""
            },
            {
                text: "柱状图",
                icon: ""
            },
            {
                text: "环形图",
                icon: ""
            },
            {
                text: "折线图",
                icon: ""
            },
            {
                text: "饼图",
                icon: ""
            },
        ]
    },
];


function Editor(): JSX.Element {

    const {state, dispatch} = useEditStore();
    const [draggable, setDraggable] = useState(false);
    const [curAssembly, setCurAssembly] = useState(null);  // 当前拖拉的数据

    // 左边烂
    const componentCol = () => {
        const handleDragStart = (element: any) => {
            console.log("--handleDragStart-");
            console.log(element);
            element.onlyCode = uuidv4();
            const k = _lodash.cloneDeep(element);
            setCurAssembly(k);
            setDraggable(true);
        };
        const handleDragEnd = () => {
            setDraggable(false);
        };
    
        return(
            <Collapse bordered={false} ghost>
    
                {
                    elementList.map((item, index) => {
                        return (
                            <Panel header={item.title} key={index}>
                                <div className="colCells">
                                    {item.list.map((element, idx) => {
                                        return (
                                            <div 
                                                onDragStart={ () => handleDragStart(element)} 
                                                className="colCell" key={idx}
                                                draggable={true}
                                                onDragEnd={handleDragEnd}
                                                >
                                                <Icon style={{ fontSize: "28px"}} component={CodepenOutlined} />
                                                <span>{element.text}</span>
                                            </div>
                                        );
                                    })}
    
                                </div>
                            </Panel>
                        );
                    })
                }
            </Collapse>
        );
    };

    // 监听iframe的拖拉事件
    const handleDrage = () => {
        setDraggable(false);
        dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: [...state.assemblyList, curAssembly]}} );
    };

    // 副作用
    useEffect(() => {
        console.log("----assemblyList-222--");
        console.log(state.assemblyList);
        postMessage(state.assemblyList);
    }, [state.assemblyList]);

    // 监听h5发送过来的数据
    useEffect(() => {
        window.addEventListener("message", data => {
            console.log("_____pc-deit---");
            console.log(data);

            if(data?.data?.type == "edit") {
                dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: data?.data?.item}} );
            }
            if(data?.data?.type == "del") {
                dispatch({type: "DEL_ASSEMBLY", payload: {delAssembly: data?.data?.item, delIndex: data?.data?.index}} );
            }
        });
    }, []);


    //iframe 发送信息
    const postMessage = (params: any) => {
        const data = {
          assemblyList: params
        };
        const iFrame = document.getElementById("frame");
        iFrame.contentWindow.postMessage(data, "*");
    };
    const handleDragOver = (e: any) => {
        e.preventDefault();
    };
    
  return (
    <div className="page-editor">
        <div className="page-editor-top">
            <div>在线开发</div>
            <div>编码主流程</div>
            <div>操作</div>
        </div>
        <div className="page-editor-box">
            <div className="box-left">
                <div className="box-left-mune"></div>
                <div className="box-left-all">
                    {componentCol()}
                </div>
            </div>
            <div className="box-center">
                <div className="box-center-all">
                    <div className="center-nav">
                        <img src={navImg} alt="" />
                    </div>
                    {
                        draggable && (<div
                        onDrop={handleDrage}
                        onDragOver={handleDragOver}
                        className="iframe-index">
                        </div>)
                    }

                    <iframe 
                        id="frame"
                        className={draggable?  "frame": ""}
                        style={{width: "100%",height: "100%", border: 0}}  
                        src="http://192.168.80.185:10086/#/pages/pageEngine/editPage/index" 
                        frameBorder="0"
                        scrolling="auto"
                        securit                                      
                        sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
                    ></iframe>
                </div>
            </div>
            <div className="box-right">
                <ConfigAttrs></ConfigAttrs>
            </div>
        </div>
    </div>
  );
}

export default Editor;